<template>
	<div class='wy-main matching-tendering wei_tendering'>
		<div class="list_tab">
			<h2>注册信息</h2>
			<a-form :form="form" @submit="handleSubmit" class="wy-form">
				<a-form-item v-bind="formItemLayout" label="登录名">
					<a-input :disabled="disabled" v-decorator="[ 'username']" placeholder='请输入登录名' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="移动电话">
					<a-input :disabled="disabled" v-decorator="[ 'mobile']" placeholder='请输入移动电话' />
				</a-form-item>
        <a-form-item v-bind="formItemLayout" label="企业类型">
          <a-select :disabled="disabled" style="width:280px" placeholder='请选择企业类型' v-decorator="[ 'companyType']">
            <a-select-option key="1" value="0">
              境内
            </a-select-option>
            <a-select-option key="2" value="1">
              境外
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="企业名称">
          <a-input :disabled="disabled" v-decorator="[ 'company']" placeholder='请输入企业名称' />
        </a-form-item>
				<a-divider class="title-divider" />
				<h2>认证信息</h2>
				<a-form-item v-bind="formItemLayout" label="统一社会信用代码">
					<a-input :disabled="disabled" v-decorator="[ 'socialCode']" placeholder='请输入统一社会信用代码' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="企业成立日期">
					<a-input :disabled="disabled" v-decorator="[ 'companyCreateTime']" placeholder='请输入企业成立日期' />
				</a-form-item>
        <a-form-item v-bind="formItemLayout" label="法定代表人姓名">
          <a-input :disabled="disabled" v-decorator="[ 'legalPerson']" placeholder='请输入法定代表人姓名' />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="企业注册地址">
          <a-input :disabled="disabled" v-decorator="[ 'companyAddress']" placeholder='请输入企业注册地址' />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="座机号码">
          <a-input :disabled="disabled" v-decorator="[ 'landline']" placeholder='请输入座机号码' />
        </a-form-item>
				<a-divider class="title-divider" />
				<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="企业形象照" class="upzjimg">
          <a-form-item class="up_img">
            <a-upload :disabled="disabled"  name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Driver_Change">
              <div class="img_zz" v-if="Driver_img">
                <div class="img_zz_text" >
                  <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text" style="margin-top: 10px;">
                    <span style="color: red;"></span>
                  </div>
                </div>
                <div class="img_zz_d"></div>
              </div>
              <img  v-if="Driver_img" :src="Driver_img" alt="avatar" />
              <div class="up_img_d" v-if="!Driver_img">
                <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text" style="margin-top: 10px;">
                   <span style="color: red;"></span>企业形象照 
                </div>
              </div>
            </a-upload>
          </a-form-item>
        </a-form-item>

        <a-divider class="title-divider" />
				<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="营业执照扫描件" class="upzjimg">
          <a-form-item class="up_img">
            <a-upload :disabled="disabled"  name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Positive_Change">
              <div class="img_zz" v-if="Positive_img">
                <div class="img_zz_text" >
                  <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text" style="margin-top: 10px;">
                    <span style="color: red;"></span>
                  </div>
                </div>
                <div class="img_zz_d"></div>
              </div>
              <img  v-if="Positive_img" :src="Positive_img" alt="avatar" />
              <div class="up_img_d" v-if="!Positive_img">
                <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text" style="margin-top: 10px;">
                   <span style="color: red;"></span>营业执照扫描件 
                </div>
              </div>
            </a-upload>
          </a-form-item>
        </a-form-item>


        <a-divider class="title-divider" />
        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="荣誉/资质图片" class="upzjimg">
          <a-form-item class="up_img" >
            <a-upload :disabled="disabled" name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="qual_Change">
            <div v-for="(item,index) in qualList" :key="index" v-if="qualList.length">
              <div class="img_zz">
                <div class="img_zz_text" v-if="index==0">
                  <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text" style="margin-top: 10px;">
                    <span style="color: red;"></span>
                  </div>
                </div>
                <div class="img_zz_d"></div>
              </div>
              <img  v-if="item.qual_img" :src="item.qual_img" alt="avatar" />
              </div>
              <div class="up_img_d" v-if="!qualList.length">
                <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text" style="margin-top: 10px;">
                   <span style="color: red;"></span>荣誉/资质图片 
                </div>
              </div>
            </a-upload>
          </a-form-item>

        </a-form-item>
        	<a-divider class="title-divider" />
				<div class="ant-row ant-form-item">
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-20 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<div class="ant-title">
							<span class="title-span" style="margin-left:-50px; font-size:16px; font-weight:700; ">审核意见</span>
						</div>
					   <div class="ant-radio">
							<a-radio-group v-model="value">
								<!-- v-decorator="['mode']" -->
					    <a-radio :value="107">
					    通过
					    </a-radio>
					    <a-radio :value="108">
					    拒绝
					    </a-radio>
			   	 </a-radio-group>
					 </div>
					 <div class="a-textarea">
						 <a-textarea placeholder="审核意见" v-model="approvalRemarks" style="margin-top: 10px; width: 447px;height:173px;" :rows="4" />
					 </div>
					</div>
				</div>
			</div>
			<div class="ant-row ant-form-item">
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-10 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							
							<a-button type="primary"  html-type="submit" >
								{{detail.approvalStatus==107?'关闭':'确认'}}
							</a-button>
             
						</span>
					</div>
				</div>
			</div>
			</a-form>
		</div>
	</div>
</template>
<script>
	import { environment } from '@/environments/environment'
	import {checkTel, checkTelNum, checkEmail} from 'utils/formValidate'
	export default {
		props:['detail'],
		
		data() {
			return {
				uploadUrl: environment.FileUploadUrl + '/fileupload/upload', // 图片上传地址
				FileUploadUrl2:environment.FileUploadUrl2,
         disabled:true,
         loading:false,
         type:2,//1个人，2企业
         approvalRemarks:'',
         value:107,
         Driver_img:'',
         Positive_img:'',
         qualList:[],
         qual_img:'',
         companyPic:'',
         companyPath:'',
         certificatesjpg:'',
         certificatesPath:'',
         qualificationsJpg:'',
         qualificationsPath:'',
				formItemLayout: {
					labelCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 4
						},
					},
					wrapperCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 20
						},
					},
				},
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		created() {
			if(this.detail){

				let d = this.detail;
			if(d.approvalStatus==107){
          this.value = 108;
        }else{
          this.value = 107;
        }
         this.approvalRemarks = d.approvalRemarks;

            if(d.companyPath){
             this.Driver_img = this.FileUploadUrl2+d.companyPath+d.companyPic
             this.companyPath = d.companyPath
             this.companyPic = d.companyPic
 
          }

            if(d.certificatesPath){
             this.Positive_img = this.FileUploadUrl2+d.certificatesPath+d.certificatesjpg
             this.certificatesPath = d.certificatesPath
             this.certificatesjpg = d.certificatesjpg

          }

            if(d.qualificationsPath){
              let qualArr = d.qualificationsPath.split(',');
              let qualifiArr = d.qualificationsJpg.split(',');

              for(var i=0;i<qualArr.length;i++){
                this.qualList.push({
                  qual_img:this.FileUploadUrl2+qualArr[i]+qualifiArr[i]
                })
              }
          }

          setTimeout(() => {
          	this.form.setFieldsValue({
            username:d.username,
            mobile:d.mobile,
            companyType:d.companyType,
            company:d.company,
            socialCode:d.socialCode,
            companyCreateTime:d.companyCreateTime,
            legalPerson:d.legalPerson,
            companyAddress:d.companyAddress,
            landline:d.landline,
          })
          }, 100);
			}
		},
		watch: {},

		mounted: function() {

		},
		methods: {

    // 附件
      handleChange(info) {
        this.fileList = info.fileList
        if(info.file.status === 'uploading') {
          return
        }
        let arr = []
        if(info.file.status === 'done') {
          this.loading = false
          // 每个货物的多个图片拼成字符串，按,分割
          let urls = [];
          for (var i=0;i<info.fileList.length;i++){
            arr.push({
              name: info.fileList[i].name,
              path: info.fileList[i].url?info.fileList[i].url:info.fileList[i].response.data.certifJpgFile
            })
          }
        }
        this.imgArray = arr;
      },
      Driver_Change(info){
         return false;
        if(info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if(info.file.status === 'done') {
          this.Driver_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
          this.companyPic = info.file.response.data.certificatesjpg//公司形象
          this.companyPath= info.file.response.data.certificatesPath//公司形象目录
          this.loading = false
        }
      },
       // 身份证正面照
      Positive_Change(info){
        return false;
        console.log(info,9889)
        if(info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if(info.file.status === 'done') {
          this.Positive_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
          this.certificatesjpg = info.file.response.data.certificatesjpg//  营业许可证
          this.certificatesPath = info.file.response.data.certificatesPath// 营业许可证目录
          this.loading = false
        }
      },

      qual_Change(info){
         return false;
        console.log(info,9889)
        if(info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if(info.file.status === 'done') {
          this.qual_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
          this.qualificationsJpg = info.file.response.data.certificatesjpg//  资质荣誉
          this.qualificationsPath = info.file.response.data.certificatesPath// 资质荣誉目录
          this.loading = false
        }
      },
            // 上传证件
      beforeUpload(file) {

        const isJPG = file.type === 'image/jpeg' || 'image/png'
        if(!isJPG) {
          this.$message.error('You can only upload JPG file!')
        }
        const isLt2M = file.size / 1024 / 1024 < 2
        if(!isLt2M) {
          this.$message.error('Image must smaller than 2MB!')
        }
        return isJPG && isLt2M
      },
          //认证提交
      handleSubmit(e) {
         if(this.detail.approvalStatus==107){
          this.$emit('cancel');
          return;
        }
        
        e.preventDefault();
        this.form.validateFieldsAndScroll((err, values) => {

          if(!err) {
          		 let params = {
          		  approvalRemarks:this.approvalRemarks,
                approvalStatus:this.value,
                username:this.detail.username
          		 }
                this.$put('/userinfo/approval',params,true).then((r) => {
                if(r.status == 200){
                  this.$message.success(r.data.message);
                  this.form.resetFields();
                  this.$emit('cancel');
                }else{
                  this.$message.error(r.data.message);
                }
                this.loading = false;
              }).catch((e) => {
                this.loading = false;
              })


            }

        });
      },
		}
	}
</script>

<style lang="less" scoped>
	.matching-tendering {
		.list_tab {
			margin-top: 10px;
		}
	}
</style>